<!-- DevicePropertyInput.vue -->
<script setup lang="ts">
import { computed } from "vue";
import { DeviceProperty } from "@/api/deviceApi";
import {
  extractContentBeforeBrackets,
  extractContentInBrackets
} from "@/views/devices/components/DevicePropertiesUtil";

const props = defineProps({
  property: {
    type: Object as () => DeviceProperty,
    required: true
  },
  modelValue: {
    type: [String, Number, Boolean],
    default: null
  }
});

const emits = defineEmits(["update:modelValue"]);

const inputValue = computed({
  get: () => props.modelValue,
  set: value => emits("update:modelValue", value)
});
</script>

<template>
  <el-form-item
    :label="property.displayName"
    :prop="property.property"
    v-if="!property.dataType.startsWith('findChannel')"
  >
    <template v-if="property.dataType === 'string'">
      <el-input
        v-model="inputValue"
        :placeholder="'请输入' + property.displayName"
      />
    </template>
    <template v-else-if="property.dataType === 'number'">
      <el-input-number
        v-model="inputValue"
        :min="property.min"
        :max="property.max"
        :step="property.precision"
        :controls="false"
        :placeholder="'请输入' + property.displayName"
      />
    </template>
    <template v-else-if="property.dataType === 'enum'">
      <el-select
        v-model="inputValue"
        :placeholder="'请选择' + property.displayName"
      >
        <el-option
          v-for="enumValue in property.enumValues"
          :key="enumValue"
          :label="extractContentInBrackets(enumValue)"
          :value="extractContentBeforeBrackets(enumValue)"
        />
      </el-select>
    </template>
    <template v-else-if="property.dataType === 'boolean'">
      <el-checkbox v-model="inputValue" />
    </template>
  </el-form-item>
</template>
